<template>
  <div>
    <!-- 正方形组件 -->
   <div class="small-box"></div>
  </div>
</template>

<script>

export default {
 
};
</script>

<style lang="scss" scoped>
.small-box{
    position: relative;
	// margin: 50px auto;
	width: 80px;
	height: 80px;
	box-sizing: border-box;
	border: 1px solid #111;
	background-color:#F2F2F2;
	line-height: 120px;
	text-indent: 5px;
}
.small-box::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	border-bottom: 1px solid #222;
	transform-origin: bottom center;
	transform:rotateZ(135deg) scale(1.414);
}
.small-box::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
	box-sizing: border-box;
	border-bottom: 1px solid #222;
	transform-origin: bottom center;
	transform:rotateZ(45deg) scale(1.414);
}

</style>
